<template>
  <div class="accountexpendregister">
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="input1" placeholder="请输入身份证号" type="number">
          <template slot="prepend">身份证号</template>
          <el-button slot="append" icon="el-icon-search" @click="query()"
            >查询</el-button
          >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-plus" @click="dialogVisibl = true"
          >添加</el-button
        >
        <el-button icon="el-icon-edit" @click="dialogVisible = true"
          >修改</el-button
        >
        <el-button icon="el-icon-delete">删除</el-button>
        <el-button icon="el-icon-printer">打印</el-button>
      </el-form-item>
    </el-form>
    <!-- 用户详情表格展示 -->
    <div v-show="hidetable" class="tableList">
      <h3>用户详情列表：</h3>
      <el-table
        :data="tableData"
        border
        style="width: 1364px"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        :row-style="{ height: '48px' }"
      >
        <el-table-column prop="type" label="姓名" width="180" />
        <el-table-column prop="amount" label="身份证号" width="180" />
        <el-table-column prop="yuamount" label="社保卡号" />
        <el-table-column prop="operationtime" label="账户余额" />
        <el-table-column prop="zremarks" label="状态" />
        <el-table-column prop="zremarks" label="备注" />
      </el-table>
    </div>
    <!-- 账户表格 -->
    <div v-show="hidetable" class="tableList">
      <h3>账户详情列表：</h3>
      <el-table
        :data="tableData"
        border
        style="width: 1364px"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        :row-style="{ height: '48px' }"
      >
        <el-table-column prop="type" label="类型" width="180" />
        <el-table-column prop="amount" label="金额" width="180" />
        <el-table-column prop="yuamount" label="余额" />
        <el-table-column prop="operationtime" label="操作时间" />
        <el-table-column prop="zremarks" label="备注" />
      </el-table>
    </div>
    <!-- 支出金额表格 -->
    <div v-show="hidetable" class="tableList">
      <h3>账户支出列表：</h3>
      <el-table
        :data="tableList"
        border
        style="width: 1364px"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        :row-style="{ height: '48px' }"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="type" label="支出金额" />
        <el-table-column prop="amount" label="状态" width="180" />
        <el-table-column prop="yuamount" label="操作员" />
        <el-table-column prop="operationtime" label="操作时间" />
        <el-table-column prop="zremarks" label="审核员" />
        <el-table-column prop="zremarks" label="审核时间" />
        <el-table-column prop="zremarks" label="说明" width="180" />
        <el-table-column prop="zremarks" label="财务" />
        <el-table-column prop="zremarks" label="财务到账时间" />
      </el-table>
    </div>
    <!-- 修改模态框 -->
    <el-dialog
      title="修改"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :label-position="labelPosition" label-width="80px">
        <el-form-item label="支出金额">
          <el-input v-model="expenditure" placeholder="请输入支出金额" />
        </el-form-item>
        <el-form-item label="说明">
          <el-input v-model="explain" placeholder="" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClose()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增模态框 -->
    <el-dialog
      title="新增"
      :visible.sync="dialogVisibl"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :label-position="labelPosition" label-width="80px">
        <el-form-item label="支出金额">
          <el-input v-model="addexpenditure" placeholder="请输入支出金额" />
        </el-form-item>
        <el-form-item label="说明">
          <el-input v-model="addexplain" placeholder="" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibl = false">取 消</el-button>
        <el-button type="primary" @click="handleCloseadd()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { API_ZHICHU_ZH, API_ZHICHU_TJZC } from "../../api/account";
export default {
  name: "",
  data() {
    return {
      msg: "账户支出登记（职保）",
      input1: "",
      select: "",
      /* 查询展示信息 */
      name: "", // 姓名
      idCard: "", // 身份证号
      socialcard: "", // 社保卡号
      balance: "", // 账户余额
      state: "", // 状态
      remarks: "", // 备注
      hidetable: false, // 纵向表格显示隐藏
      /* 账户信息表格 */
      tableData: [
        /* {
          type: "", // 类型
          amount: "", // 金额
          yuamount: "", // 余额
          operationtime: "", // 操作时间
          zremarks: "", // 账户表格备注
        }, */
      ],
      /* 支出金额表格 */
      tableList: [],
      dialogVisible: false, // 修改模态框显示隐藏
      dialogVisibl: false, // 添加模态框显示隐藏
      labelPosition: "right",
      /* 修改 */
      expenditure: "", // 支出金额
      explain: "", // 说明原因
      /* 增加 */
      addexpenditure: "", // 支出金额
      addexplain: "", // 说明原因
    };
  },
  methods: {
    query(name) {
      this.hidetable = true;
    },
    handleClose() {
      this.$confirm("确认修改？")
        .then((_) => {
          // done();
          this.dialogVisible = false;
        })
        .catch((_) => {});
    },
    handleCloseadd() {
      this.$confirm("确认增加？")
        .then((_) => {
          // done();
          this.dialogVisibl = false;
        })
        .catch((_) => {});
    },
    onsubmit() {
      // API_ZHICHU_TJZC()
      //   .then((res) => {
      //     console.log(res);
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
    },
  },
  created(){
    // this.onsubmit()
  }
};
</script>

<style scoped lang="scss">
.accountexpendregister {
  padding: 30px;
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .el-input-group__prepend {
    width: 300px;
  }
  .el-input__inner {
    width: 300px;
  }
  .tableList {
    margin-top: 20px;
  }
}
</style>
